<template>
    <div class="app-container">
        <el-row :gutter="24">
            <el-col :span="4">
                <el-tree
                    :data="treeData"
                    :props="{value: 'id',children: 'children',label: 'label',}"
                    highlight-current
                    @node-click="handleNodeClick"
                />
            </el-col>
            <el-col :span="20">
                <div class="video-item-list">
                    <div class="video-items" v-for="(_, index) in 4" :key="index" @click="handlePlayClick(index)">
                        <div :id="`Player${index}`" :style="getPlayerStyle(index)"/>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import {useRoute} from "vue-router";
import {getRoomDeviceChannelTree} from "@/api/PrisonMonitor/PrisonMonitor.js";
import {getChannelUrl} from "@/api/videoApi/videoApi.js";

const treeData = ref([])

const route = useRoute();
const roomId = ref(route.query.roomId)

// 视频播放窗口
const play = ref([])
const player0 = ref('');
const player1 = ref('');
const player2 = ref('');
const player3 = ref('');

// 当前选中的视频窗口
const activePlayer = ref(0)

// 获取频道树
const getChannelTreeList = async () => {

    // 后端不愿意修改统一节点，因此由前端优化处理
    await getRoomDeviceChannelTree(roomId.value)
        .then(res => {
            treeData.value = res.data.map(item => {
                return {
                    ...item,
                    id: item.monitorserverId,
                    label: item.servername,
                    clickType: 0,
                    children: item.roomTypes.map(room => {
                        return {
                            ...room,
                            clickType: 0,
                            children: room.children.map(channel => {
                                return {
                                    ...channel,
                                    id: channel.roomId,
                                    label: channel.roomname,
                                    clickType: 0,
                                    children: channel.baseMonitorChannels.map(channels => {
                                        return {
                                            ...channels,
                                            id: channels.monitorchannelsId,
                                            label: channels.channelname,
                                            clickType: 1
                                        }
                                    })
                                }
                            })
                        };
                    })
                }
            })
        })
}

onMounted(() => {
    getChannelTreeList();

    play.value = Array.from({length: 4}, (_, index) => {
        return new WasmPlayer(null, `Player${index}`);
    })

    // player0.value = new WasmPlayer(null, 'Player0')
    // player1.value = new WasmPlayer(null, 'Player1')
    // player2.value = new WasmPlayer(null, 'Player2')
    // player3.value = new WasmPlayer(null, 'Player3')
})


// 选中某块播放器
const handlePlayClick = (index) => {
    activePlayer.value = index
}

// 获取当前播放器的样式
const getPlayerStyle = (index) => {
    // 如果当前播放器是选中的播放器，返回带边框的样式，否则返回空样式
    return activePlayer.value === index ? {border: '2px solid red'} // 选中的播放器添加红色边框
        : {};
};

// 树状节点点击事件
const handleNodeClick = (e) => {
    if (e.clickType) {
        const query = {
            deviceId: e.channelcode,
            channel: e.channels,
            monitorServerId: e.monitorserverId,
        }
        getChannelUrl(query).then(data => {
            const playUrl = data.data.prefix + data.data.EasyDarwin.Body.URL;
            playHandle(playUrl)
        })
        // playHandle(query)
    }
}

// const playerUrlList = ref([])
// 播放事件
const playHandle = (url) => {
    console.log(activePlayer.value)
    const index = activePlayer.value;
    // playerUrlList.value[index] = url;
    play.value[index].stop();
    play.value[index].play(url, 1);
}
</script>

<style scoped lang="scss">
.video-item-list {
    height: calc(100vh - 155px);
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列，每列占据相等的空间 */
    grid-template-rows: repeat(2, 1fr); /* 2行，每行高度自动适应内容 */
    gap: 1rem;
}
</style>